{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} 标题 {% endblock %}</title>
    {% block css %} {% endblock %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/main-page.css' %}">
    <style>
        /* 新增导航栏高度对应的顶部边距 */
        .container {
            margin-top: 9rem; /* 根据实际导航栏高度调整这个值 */
            padding: 0;
        }

        .header {
            height: 10rem; /* 如果尚未定义请添加这一行 */
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000; /* 保持导航栏在最上层 */
        }
    </style>
</head>
<body>

<header class="header">
    <a href="/home/" class="logo"> <i class="fa-solid fa-heart"></i> 视讯智疗 </a>

    <nav class="navbar">
        <a href="/home/">首页</a>
        <a href="/aichat/">心语疗愈</a>
        <a href="/test/">心理自测</a>
        <a href="/game/">治愈游戏</a>
        <a href="/treehole/">心理树洞</a>
    </nav>

    <div class="icons">
        <a href="/homepage/" class="fa-solid fa-calendar-days"></a>
        <div class="user-menu">
            <a href="/personalcenter/" class="fas fa-user" id="user-icon"></a>
            <div class="dropdown-menu" id="dropdown-menu">
                <a href="/personalcenter/">个人信息</a>
                <a href="/logout/">退出</a>
            </div>
        </div>
        <button class="login-out-btn" onclick="window.location.href='/logout/';">退出</button>
    </div>
</header>

<div class="container">
    {% block body %} {% endblock %}
</div>

<section class="footer">
  <div class="contact">联系我们：</div>
  <div class="credit">
    © 2025 视讯智疗. created by <span>心语</span> | all rights reserved!
  </div>
</section>

{% block script %} {% endblock %}

</body>
</html>